<template>
  <view class="container">
    <quick-button></quick-button>
    <view class="search-container-view">
      <view class="search-view" @click="navToSearchList">
        <image src="../../static/home_nav_search.png" class="icon"></image>
        <input disabled placeholder="打针|换药" />
        <view class="search-text">搜索</view>
      </view>
    </view>
    <view class="bottom-content-view" :style="{ height: scrollHeight }">
      <view class="menu-left">
        <scroll-view scroll-y="true">
          <view
            class="left-list"
            v-for="(item, index) in categoryList"
            :key="item.uid || index"
            @click="menuClick(index)">
            <view
              class="menu-item"
              :class="[current === index ? 'menu_item_active' : '']">
              <view class="icon" v-if="current === index"></view>
              <view class="menu_item_name">{{ item.proFirstClassName }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="right">
        <!-- 移除不必要的scroll事件绑定 -->
        <scroll-view scroll-y="true" :scroll-top="rightListScrollTop">
          <view class="right-content">
            <view class="right-list">
              <view class="title">
                {{ categoryList[current].proFirstClassName }}
              </view>
              <view
                class="list-item"
                v-for="(item, index) in list"
                :key="item.uid"
                @click="navToDetails(item)">
                <image :src="item.picImg" class="img" mode="aspectFill"></image>
                <view class="rigth-view">
                  <view class="title">{{ item.proName }}</view>
                  <!-- 移除自定义指令，使用纯CSS实现多行溢出 -->
                  <view class="content">
                    {{ item.sketch | htmlToTextFilters }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import * as proFirstClass from "../../common/api/proFirstClass.js";
import * as medicalProjects from "../../common/api/medicalProjects.js";
export default {
  data() {
    return {
      showMenu: false,
      scrollH: 0, // 滚动高度（仅计算一次）
      categoryList: [],
      list: [],
      current: 0,
      rightListScrollTop: 0,
    };
  },
  computed: {
    scrollHeight() {
      return `${this.scrollH}px`;
    },
  },
  onLoad(opt) {
    if (opt.index) {
      this.current = parseInt(opt.index);
    }
    // 页面加载时只计算一次滚动高度，避免重复计算导致抖动
    uni.getSystemInfo({
      success: (res) => {
        this.scrollH = res.safeArea.height - 88;
      },
    });
  },
  onShow() {
    this.getCategoryList(); // 仅加载数据，不重新计算高度
  },
  methods: {
    menuClick(index) {
      this.current = index;
      this.getProjectList();
    },
    getCategoryList() {
      proFirstClass
        .queryAll({})
        .then((result) => {
          this.categoryList = result.data.data;
          this.getProjectList();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getProjectList() {
      const proFirstClass = this.categoryList[this.current] || {};
      const proFirstClassUid = proFirstClass.uid || "";
      const param = {
        proFirstClassUid,
      };
      medicalProjects
        .queryByPage(param)
        .then((result) => {
          this.list = result.data.data.rows || [];
          this.rightListScrollTop = 0;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 移除不必要的滚动事件处理
    navToDetails(item) {
      uni.navigateTo({
        url:
          "/patientAppPages/pages/serviceDetails/serviceDetails?uid=" +
          item.uid,
      });
    },
    navToSearchList() {
      uni.navigateTo({
        url: "/patientAppPages/pages/searchList/searchList",
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
}

.search-container-view {
  width: 100%;
  padding: 10rpx;
  box-sizing: border-box;

  .search-view {
    width: 100%;
    height: 64rpx;
    background: white;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    padding-right: 20rpx;
    box-sizing: border-box;

    .icon {
      width: 40rpx;
      height: 40rpx;
    }

    input {
      height: 100%;
      flex: 1;
      font-size: 26rpx;
      margin-left: 10rpx;
      margin-right: 10rpx;
    }

    .search-text {
      font-size: 30rpx;
      color: #0bc5ae;
    }
  }
}

.right-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  .title {
    color: #232323;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx; // 增加间距，优化布局稳定性
  }
  .list-item {
    width: 100%;
    height: 220rpx; // 固定列表项高度，避免动态变化
    display: flex;
    align-items: center;
    border-bottom: solid 1px #f8f8f8;
    box-sizing: border-box; // 确保padding不影响整体高度
    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
      object-fit: cover; // 固定图片比例，避免加载后变形
    }
    .rigth-view {
      flex: 1;
      margin-left: 20rpx;
      .title {
        font-size: 32rpx;
        color: #232323;
        font-weight: bold;
        margin-bottom: 8rpx;
      }
      .content {
        color: rgba(35, 35, 35, 0.7);
        font-size: 26rpx;
        // 纯CSS实现多行文本溢出，避免自定义指令导致的重绘
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5; // 固定行高，确保高度稳定
      }
    }
  }
}

.bottom-content-view {
  height: 100%;
  display: flex;
  overflow: hidden; // 避免子元素超出容器导致额外滚动
  .menu-left {
    height: 100%;
    width: 200rpx;
    background: #f8f8f8; // 修复引号错误，确保样式正常
    scroll-view {
      height: 100%;
    }

    .menu-item {
      width: 200rpx;
      height: 100rpx;
      color: rgba(35, 35, 35, 0.7);
      font-weight: 400;
      font-size: 26rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .menu_item_active {
      background: white;
      color: #0bc5ae;
      font-weight: 500;
    }
    .icon {
      width: 6rpx;
      height: 26rpx;
      background: #0bc5ae;
      position: absolute;
      left: 0;
    }
  }
  .right {
    width: 100%;
    height: 100%;
    background: white;
    scroll-view {
      height: 100%; // 明确滚动容器高度，确保滚动稳定
      overflow: hidden;
    }
    .right-content {
      box-sizing: border-box;
      padding: 20rpx;
      will-change: transform; // 提示浏览器提前优化渲染，减少抖动
    }
  }
}
</style>
